<template>
  <div id="building">
    <div class="login">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div class="login-text">
          <p>欢迎登录志愿者培训管理平台</p>
        </div>
        <div class="login-lo">管理员登入
          <span></span>
        </div>
        <el-form-item label="" prop="mobile" class="label">
          <p><i class="el-icon-user"></i>用户名</p>
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="" prop="password" class="form">
          <p><i class="el-icon-lock"></i>密码</p>
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>

        <el-form-item text-align: left>
          <el-button size="small" type="primary" @click="submitForm('ruleForm')" :loading="loading">登录</el-button>
          <!-- <el-button size="small" type="primary" @click="submitForm('ruleForm')" :loading="loading">注册</el-button> -->
        </el-form-item>
        
      </el-form>
    </div>
  </div>
</template>

<script>

import { login } from '@/api/login';
export default {
  name: 'LoginView',
  data() {
    return {
      loading: false,
      rules: {},
      ruleForm: {
        mobile: "13853108236",
        password: "108236"
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await login(this.ruleForm)
          if (res.code === 1) {
            localStorage.setItem('token-sqf', res.token)
            this.$message.success('恭喜您!登录成功！')
            location.href = '/'
          } else {
            this.$message.error('error')
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>


<style lang="scss" scoped>
#building {
  background: url("../../image/1.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}

.login {
  text-align: center;
  width: 280px;
  height: 380px;
  padding: 0px 20px 20px 30px;
  position: absolute;
  bottom: 200px;
  right: 150px;
  border-radius: 5px;
  background-color: whitesmoke;
  box-shadow: 0 0 10px #ddd;
}

.login-text {
  text-align: center;
  margin-top:15px;
  height:50px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.login-text p {
  font-weight: 600;
}

.login-lo {
  text-align: left;
  position: relative;
  line-height: 50px;
  margin-top: 10px;
  color: #57a3f3;
  margin-bottom: 50px;
  border-bottom: 1px solid rgba(0, 0, 0, .3);
}
.label p{
  margin-top:10px;
}
.login-lo span {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 88px;
  height: 3px;
  background-color: #57a3f3;
}

.el-form-item {
  position: relative;
}

.el-form-item p {
  position: absolute;
  top: -50px;
  left: -97px;
}

.el-form-item .el-input {
  width: 280px;
  height: 50px;
  transform: translateX(-100px);
}

.el-button {
  transform: translateX(-160px);
}
.form p{
  margin-top:15px;
}
el-button{
  width:60px;
  height:32px;
}
</style>
